<template>
  <div class="home-container">
    <!-- 欢迎卡片 -->
    <el-card class="welcome-card">
      <div class="welcome-content">
        <div class="welcome-text">
          <h1>
            <el-icon class="welcome-icon"><Money /></el-icon>
            智能投顾系统
          </h1>
          <p>专业的基金投资研究和智能投资管理平台</p>
        </div>
        
        <!-- 数据概览 -->
        <el-row class="data-overview" :gutter="20">
          <el-col :span="6">
            <div class="data-card">
              <el-icon><Money /></el-icon>
              <div class="data-info">
                <div class="data-value">¥ 1,234,567</div>
                <div class="data-label">总资产规模</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="data-card">
              <el-icon><TrendCharts /></el-icon>
              <div class="data-info">
                <div class="data-value">+15.6%</div>
                <div class="data-label">年化收益率</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="data-card">
              <el-icon><PieChart /></el-icon>
              <div class="data-info">
                <div class="data-value">89</div>
                <div class="data-label">基金组合数</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="data-card">
              <el-icon><Wallet /></el-icon>
              <div class="data-info">
                <div class="data-value">1,234</div>
                <div class="data-label">交易总数</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 快捷操作 -->
    <h2 class="section-title">
      <el-icon><Grid /></el-icon>
      快捷操作
    </h2>
    <el-row class="quick-actions" :gutter="20">
      <el-col :span="6">
        <el-card class="action-card" shadow="hover" @click="goToModule('FundResearch')">
          <el-icon class="action-icon"><Search /></el-icon>
          <h3>基金筛选</h3>
          <p>快速查找合适的基金</p>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="action-card" shadow="hover" @click="goToModule('PortfolioManagement')">
          <el-icon class="action-icon"><Plus /></el-icon>
          <h3>创建组合</h3>
          <p>构建新的投资组合</p>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="action-card" shadow="hover" @click="goToModule('TradeManagement')">
          <el-icon class="action-icon"><Sell /></el-icon>
          <h3>交易下单</h3>
          <p>执行基金交易操作</p>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="action-card" shadow="hover" @click="goToModule('StrategyManagement')">
          <el-icon class="action-icon"><Setting /></el-icon>
          <h3>策略配置</h3>
          <p>管理投资策略</p>
        </el-card>
      </el-col>
    </el-row>

    <!-- 系统模块 -->
    <h2 class="section-title">
      <el-icon><Grid /></el-icon>
      系统模块
    </h2>
    
    <!-- 系统模块 -->
    <div class="modules-container">
      <!-- 基金研究 -->
      <el-card class="module-card" shadow="hover" @click="goToModule('FundResearch')">
        <div class="module-header">
          <el-icon><Coin /></el-icon>
          <h3>基金研究</h3>
        </div>
        <div class="module-content">
          <p>全面的基金数据、筛选、分析和基金筛选功能，支持多维度查询和组合构建</p>
        </div>
        <div class="module-footer">
          <el-button text type="primary">进入模块<el-icon class="el-icon--right"><ArrowRight /></el-icon></el-button>
        </div>
      </el-card>
      
      <!-- 因子管理 -->
      <el-card class="module-card" shadow="hover" @click="goToModule('FactorManagement')">
        <div class="module-header">
          <el-icon><SetUp /></el-icon>
          <h3>因子管理</h3>
        </div>
        <div class="module-content">
          <p>管理基金因子，支持创建和定义因子，构建风格因子和研究因子</p>
        </div>
        <div class="module-footer">
          <el-button text type="primary">进入模块<el-icon class="el-icon--right"><ArrowRight /></el-icon></el-button>
        </div>
      </el-card>
      
      <!-- 策略管理 -->
      <el-card class="module-card" shadow="hover" @click="goToModule('StrategyManagement')">
        <div class="module-header">
          <el-icon><Histogram /></el-icon>
          <h3>策略管理</h3>
        </div>
        <div class="module-content">
          <p>支持多类型资产配置、FOF组合、指数追踪和指数增强等多种策略的建立与管理</p>
        </div>
        <div class="module-footer">
          <el-button text type="primary">进入模块<el-icon class="el-icon--right"><ArrowRight /></el-icon></el-button>
        </div>
      </el-card>
      
      <!-- 组合产品 -->
      <el-card class="module-card" shadow="hover" @click="goToModule('PortfolioManagement')">
        <div class="module-header">
          <el-icon><Collection /></el-icon>
          <h3>组合产品</h3>
        </div>
        <div class="module-content">
          <p>组合产品创建、上架申购、产品详情展示和组合管理功能</p>
        </div>
        <div class="module-footer">
          <el-button text type="primary">进入模块<el-icon class="el-icon--right"><ArrowRight /></el-icon></el-button>
        </div>
      </el-card>
      
      <!-- 交易管理 -->
      <el-card class="module-card" shadow="hover" @click="goToModule('TradeManagement')">
        <div class="module-header">
          <el-icon><Sell /></el-icon>
          <h3>交易管理</h3>
        </div>
        <div class="module-content">
          <p>支持组合申购、赎回处理、客户确认、交易管理和交易结算管理</p>
        </div>
        <div class="module-footer">
          <el-button text type="primary">进入模块<el-icon class="el-icon--right"><ArrowRight /></el-icon></el-button>
        </div>
      </el-card>
      
      <!-- 回测分析 -->
      <el-card class="module-card" shadow="hover" @click="goToModule('FundResearch')">
        <div class="module-header">
          <el-icon><DataAnalysis /></el-icon>
          <h3>回测分析</h3>
        </div>
        <div class="module-content">
          <p>全面的绩效回测分析功能，支持历史模拟和多指标评估</p>
        </div>
        <div class="module-footer">
          <el-button text type="primary">进入模块<el-icon class="el-icon--right"><ArrowRight /></el-icon></el-button>
        </div>
      </el-card>
    </div>

    <!-- AI智能助手 -->
    <h2 class="section-title">
      <el-icon><ChatDotRound /></el-icon>
      智能助手
    </h2>
    <el-card class="chat-card">
      <div class="chat-container">
        <div class="chat-messages" ref="messagesContainer">
          <div v-for="(message, index) in messages" :key="index" :class="['message', message.type]">
            <div class="message-content" v-if="message.type === 'user'">{{ message.content }}</div>
            <div class="message-content markdown-body" v-else v-html="renderMarkdown(message.content)"></div>
          </div>
          <div v-if="loading" class="message assistant">
            <div class="message-content loading">
              <el-icon class="loading-icon"><Loading /></el-icon>
              AI正在思考中...
            </div>
          </div>
        </div>
        <div class="chat-input">
          <el-input
            v-model="inputMessage"
            placeholder="请输入您的问题..."
            :disabled="loading"
            @keyup.enter="sendMessage"
          >
            <template #append>
              <el-button :loading="loading" type="primary" @click="sendMessage">发送</el-button>
            </template>
          </el-input>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { marked } from 'marked'
import { 
  Coin, SetUp, Histogram, Collection, Sell, DataAnalysis, ArrowRight, Loading,
  HomeFilled, Money, TrendCharts, Wallet, PieChart, Search, Plus, Setting,
  Grid, ChatDotRound
} from '@element-plus/icons-vue'
import { sendMessage as sendChatMessage } from '@/api/chat'
import { ElMessage } from 'element-plus'

// 配置marked选项
marked.setOptions({
  breaks: true,
  gfm: true,
  sanitize: false
})

export default {
  name: 'HomeView',
  components: {
    Coin, SetUp, Histogram, Collection, Sell, DataAnalysis, ArrowRight, Loading,
    HomeFilled, Money, TrendCharts, Wallet, PieChart, Search, Plus, Setting,
    Grid, ChatDotRound
  },
  setup() {
    const router = useRouter()
    const messagesContainer = ref(null)
    const inputMessage = ref('')
    const loading = ref(false)
    const messages = ref([
      { type: 'assistant', content: '您好！我是您的智能投资顾问助手，请问有什么可以帮您？' }
    ])

    // 渲染Markdown
    const renderMarkdown = (content) => {
      try {
        return marked(content || '')
      } catch (error) {
        console.error('Markdown渲染错误:', error)
        return content
      }
    }

    // 跳转到指定模块
    const goToModule = (routeName) => {
      router.push({ name: routeName })
    }

    // 发送消息
    const sendMessage = async () => {
      if (!inputMessage.value.trim() || loading.value) return

      const userMessage = inputMessage.value.trim()
      messages.value.push({ type: 'user', content: userMessage })
      inputMessage.value = ''
      loading.value = true

      try {
        const response = await sendChatMessage({ question: userMessage })
        messages.value.push({ type: 'assistant', content: response.answer })
      } catch (error) {
        ElMessage.error('发送消息失败，请稍后重试')
        console.error('发送消息失败:', error)
      } finally {
        loading.value = false
        await nextTick()
        if (messagesContainer.value) {
          messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
        }
      }
    }
    
    return {
      goToModule,
      inputMessage,
      loading,
      messages,
      messagesContainer,
      sendMessage,
      renderMarkdown
    }
  }
}
</script>

<style>
/* GitHub Markdown 样式 */
.markdown-body {
  color: #24292e;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
  font-size: 14px;
  line-height: 1.5;
}

.markdown-body h1 {
  font-size: 1.5em;
  margin: 0.5em 0;
}

.markdown-body h2 {
  font-size: 1.3em;
  margin: 0.5em 0;
}

.markdown-body h3 {
  font-size: 1.1em;
  margin: 0.5em 0;
}

.markdown-body ul, .markdown-body ol {
  padding-left: 1.5em;
  margin: 0.5em 0;
}

.markdown-body li {
  margin: 0.2em 0;
}

.markdown-body p {
  margin: 0.5em 0;
}

.markdown-body code {
  background-color: rgba(27,31,35,0.05);
  border-radius: 3px;
  padding: 0.2em 0.4em;
  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
}

.markdown-body pre {
  background-color: #f6f8fa;
  border-radius: 3px;
  padding: 1em;
  overflow: auto;
}

.message.user .message-content {
  background-color: #409EFF;
  color: white;
}

.message.assistant .message-content {
  background-color: #f4f4f5;
  color: #303133;
}

.message.assistant .message-content.loading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.loading-icon {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.chat-input {
  padding: 20px;
  border-top: 1px solid #ebeef5;
}

.chat-input .el-input {
  width: 100%;
}

.chat-input .el-button {
  margin-left: 10px;
}

/* 滚动条样式 */
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-thumb {
  background-color: #909399;
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-track {
  background-color: #f4f4f5;
}
</style>

<style scoped>
.home-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.welcome-card {
  margin-bottom: 30px;
  background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
  color: white;
  border: none;
}

.welcome-content {
  padding: 20px 0;
}

.welcome-text {
  text-align: center;
  margin-bottom: 30px;
}

.welcome-text h1 {
  font-size: 36px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-icon {
  font-size: 36px;
  margin-right: 15px;
}

.data-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  backdrop-filter: blur(10px);
  transition: transform 0.3s;
}

.data-card:hover {
  transform: translateY(-5px);
}

.data-card .el-icon {
  font-size: 40px;
  margin-right: 15px;
}

.data-value {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 5px;
}

.data-label {
  font-size: 14px;
  opacity: 0.8;
}

.quick-actions {
  margin-bottom: 30px;
}

.action-card {
  text-align: center;
  padding: 30px;
  cursor: pointer;
  transition: all 0.3s;
  background: white;
}

.action-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.action-icon {
  font-size: 40px;
  color: #1a237e;
  margin-bottom: 15px;
}

.action-card h3 {
  margin: 10px 0;
  font-size: 18px;
  color: #1a237e;
}

.action-card p {
  color: #666;
  font-size: 14px;
}

.section-title {
  font-size: 24px;
  margin: 30px 0 20px;
  color: #303133;
  display: flex;
  align-items: center;
}

.section-title .el-icon {
  margin-right: 10px;
  font-size: 24px;
  color: #409EFF;
}

.modules-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.module-card {
  background: white;
  border-radius: 12px;
  transition: all 0.3s;
}

.module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.module-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.module-header .el-icon {
  font-size: 28px;
  color: #1a237e;
}

.module-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.module-content {
  margin-bottom: 15px;
  color: #606266;
  min-height: 60px;
}

.module-footer {
  text-align: right;
}

.chat-card {
  margin-bottom: 30px;
  background: white;
}

.chat-container {
  height: 500px;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  margin-bottom: 20px;
}

.message {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.message.user {
  align-items: flex-end;
}

.message.assistant {
  align-items: flex-start;
}

.message-content {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 12px;
  word-break: break-word;
}

.message-content.loading {
  display: flex;
  align-items: center;
  color: #909399;
  background-color: #f4f4f5;
  padding: 8px 16px;
}

/* 添加响应式布局 */
@media (max-width: 1200px) {
  .modules-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .modules-container {
    grid-template-columns: 1fr;
  }
  
  .data-overview .el-col {
    margin-bottom: 20px;
  }
}
</style> 